<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物美容 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/service-page.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link active">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <section class="service-hero grooming">
            <div class="container">
                <h1>宠物美容</h1>
                <p>专业美容师打造，让您的爱宠焕然一新，成为最闪亮的明星。</p>
            </div>
        </section>

        <div class="container service-layout">
            <div class="service-details">
                <h2><i class="fas fa-cut"></i> 服务内容</h2>
                <p>我们提供多种美容套餐，满足不同品种和需求。基础套餐包含：</p>
                <div class="feature-list">
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>基础洗护</h4><p>包含专业的洗澡和毛发梳理。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>创意造型</h4><p>根据您的需求和宠物特征，设计并修剪独特造型。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>SPA水疗</h4><p>舒缓皮肤，放松身心，促进血液循环。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>牙齿护理</h4><p>基础的牙齿清洁，预防口腔问题。</p></div></div>
                </div>

                <h2><i class="fas fa-tags"></i> 价格套餐</h2>
                <div class="pricing-table">
                    <div class="pricing-option"><h4>洗护套餐</h4><p>基础清洁</p><div class="price">¥128</div></div>
                    <div class="pricing-option active"><h4>造型套餐</h4><p>洗护+造型</p><div class="price">¥198</div></div>
                    <div class="pricing-option"><h4>SPA套餐</h4><p>造型+SPA</p><div class="price">¥258</div></div>
                </div>
            </div>

            <div class="booking-form-container">
                <div class="booking-form">
                    <h2>立即预约</h2>
                    <form id="bookingForm" onsubmit="submitBooking(event)">
                        <div class="form-group">
                            <label>选择宠物</label>
                            <select name="petId" required>
                                <option value="">请选择您的爱宠</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>服务日期</label>
                            <input type="date" name="serviceDate" required>
                        </div>
                        <div class="form-group">
                            <label>服务时间</label>
                            <select name="serviceTime" required>
                                <option value="">请选择时间段</option>
                                <option value="morning">上午 (9:00-12:00)</option>
                                <option value="afternoon">下午 (14:00-17:00)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>服务地址</label>
                            <select name="address" required>
                                <option value="">请选择服务地址</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>备注信息</label>
                            <textarea name="notes" rows="2" placeholder="特殊需求或注意事项"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-large">确认预约</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <a href="services.html" class="back-to-services">
        <i class="fas fa-arrow-left"></i>
    </a>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
    let groomingServiceId = null;
    document.addEventListener('DOMContentLoaded', function() {
        // 0. 获取宠物美容服务ID
        petHouseAPI.services.getAll().then(res => {
            const services = res.data || [];
            const grooming = services.find(s => s.name === '宠物美容');
            if (grooming) {
                groomingServiceId = grooming.id;
            } else {
                alert('未找到"宠物美容"服务类型，无法预约！');
            }
        });
        // 1. 加载宠物列表
        petHouseAPI.pets.getAll().then(res => {
            const pets = res.data || [];
            const petSelect = document.querySelector('select[name="petId"]');
            petSelect.innerHTML = '<option value="">请选择您的爱宠</option>' +
                pets.map(p => `<option value="${p.id}">${p.name} (${p.type})</option>`).join('');
        });
        // 2. 加载地址列表
        if (petHouseAPI.address && petHouseAPI.address.getAll) {
            petHouseAPI.address.getAll().then(res => {
                const addresses = res.data || [];
                const addrSelect = document.querySelector('select[name="address"]');
                addrSelect.innerHTML = '<option value="">请选择服务地址</option>' +
                    addresses.map(a => `<option value="${a.id}">${a.province}${a.city}${a.district}${a.detailAddress}</option>`).join('');
            });
        }
        // 3. 价格套餐可选
        const pricingOptions = document.querySelectorAll('.pricing-option');
        pricingOptions.forEach(option => {
            option.addEventListener('click', function() {
                pricingOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
            });
        });
    });
    // 4. 表单提交
    async function submitBooking(e) {
        e.preventDefault();
        const form = document.getElementById('bookingForm');
        const petId = form.petId.value;
        const addressId = form.address.value;
        const serviceDate = form.serviceDate.value;
        const serviceTime = form.serviceTime.value;
        const remark = form.notes.value;
        // 获取选中的套餐
        const selectedPackage = document.querySelector('.pricing-option.active h4')?.textContent || '';
        // 动态获取美容服务ID
        const serviceId = groomingServiceId;
        if (!serviceId) {
            alert('未找到"宠物美容"服务类型，无法预约！');
            return;
        }
        // 拼接服务时间
        const serviceTimeStr = serviceDate + ' ' + (serviceTime === 'morning' ? '09:00:00' : '14:00:00');
        try {
            await petHouseAPI.orders.create({
                petId,
                serviceId,
                address: addressId,
                serviceTime: serviceTimeStr,
                remark,
                package: selectedPackage
            });
            alert('预约成功！');
            window.location.href = 'orders.html';
        } catch (err) {
            alert('预约失败，请重试');
        }
    }
    </script>
</body>
</html> 